<template>
  <!-- 订单界面 -->
  <div>
    <!-- 顶部标题 -->
    <div class="header_title">
      <van-nav-bar title="订单" />
    </div>
    <!-- 导航栏 -->
    <!-- {{ userInfo.id }} -->
    <div class="content_tab">
      <div v-if="orderData.length == 0">
        <van-tabs v-model="active">
          <van-tab v-for="tab in tabData" :key="tab" :title="tab">
            <van-empty v-if="tab == '全部订单'" description="您暂时没有订单" />
            <van-empty v-else :description="'你没有' + tab + '订单'"
          /></van-tab>
        </van-tabs>
      </div>
      <div v-else>
        <van-tabs v-model="active">
          <van-tab v-for="tab in tabData" :key="tab" :title="tab">
            <div v-if="tab == '全部订单'">
              <div class="order">
                <div
                  class="order_item"
                  v-for="order in orderData"
                  :key="order.id"
                  @click="clickOrder(order.id)"
                >
                  <div class="flex_item1">
                    <img :src="order.customer.idcardPhotoPositive" alt="" />
                  </div>
                  <div class="flex_item2">
                    <span class="name">{{ order.customer.username }}</span>
                    <span class="status">{{ order.status }}</span>
                    <p class="address">
                      {{ order.address.province }}{{ order.address.city
                      }}{{ order.address.area }}{{ order.address.address }}
                    </p>
                    <div class="date_pirce">
                      <div class="date">{{ order.orderTime | filter }}</div>
                      <div class="pirce">￥{{ order.total }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-else>
              <div v-if="orderData.filter((item) => item.status == tab) == ''">
                <van-empty :description="'你没有' + tab + '订单'" />
              </div>
              <div v-else>
                <div class="order">
                  <div
                    class="order_item"
                    v-for="order in orderData.filter(
                      (item) => item.status == tab
                    )"
                    :key="order.id"
                    @click="clickOrder(order.id)"
                  >
                    <div class="flex_item1">
                      <img :src="order.customer.idcardPhotoPositive" alt="" />
                    </div>
                    <div class="flex_item2">
                      <span class="name">{{ order.customer.username }}</span>
                      <span class="status">{{ order.status }}</span>
                      <p class="address">
                        {{ order.address.province }}{{ order.address.city
                        }}{{ order.address.area }}{{ order.address.address }}
                      </p>
                      <div class="date_pirce">
                        <div class="date">{{ order.orderTime | filter }}</div>
                        <div class="pirce">￥{{ order.total }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <!-- 底部 -->
    <div class="footer" style="height: 100px"></div>
  </div>
</template>

<script>
// 引入axios
import { get, post, post_json } from "@/http/axios";
// 引入vuex辅助函数
import { mapActions, mapState, mapGetters, mapMutations } from "vuex";
// 引入时间模块
import moment from "moment";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    //这里存放数据
    return {
      active: 0,
      tabData: ["全部订单", "待派单", "待接单", "待确认", "已完成"],
      list: [],
    };
  },
  //计算属性 类似于data概念
  computed: {
    ...mapState("user", ["token", "userInfo"]),
    ...mapState("order", ["orderData"]),
  },
  //方法集合
  methods: {
    // 引入vuex中的mutations
    ...mapActions("user", ["getUserInfo"]),
    ...mapActions("order", ["getOrderData"]),
    /**
     * @description:获取全部的数据
     * @param {*}
     * @return {*}
     * @author: MQJ
     */
    getAllOrderData() {
      let data = {
        page: 1,
        pageSize: 100,
        customerId: this.list.customerId,
      };
      console.log(data);
      // 调用vuex中的方法 参数
      this.getOrderData(data);
      console.log("-----this.orderData", this.orderData);
      this.getUserInfo();
      // this.customerData = JSON.stringify(this.orderData);
      // console.log("-----this.orderData", this.orderData);

      // sconsole.log("-----this.userInfo", this.userInfo);
      // this.userName = this.userInfo.username;
      // console.log(this.userName);
    },
    /**
     * @description:点击商品时触发
     * @param {*}
     * @return {*}
     * @author: MQJ
     */
    // 点击商品时触发
    clickOrder(id) {
      // console.log("-----this.orderData", this.orderData);
      // console.log(id);
      this.$router.push({ path: "OrderDetails", query: { id: id } });
    },
  },
  filters: {
    filter: function (data) {
      return moment(data).format("YYYY-MM-DD hh:mm:ss");
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 获取用户的id
    this.getUserInfo().then((r) => {
      this.list.customerId = this.userInfo.id;
      this.getAllOrderData();
    });
    // this.getAllOrderData();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //监控data中的数据变化
  watch: {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.order {
  margin-top: 1em;
  padding: 0 2em;
}
.order .order_item {
  width: 93%;
  height: 87px;
  margin: 0 0 20px 0;
  box-shadow: 0 0 6px 0 #ccc;
  display: flex;
  padding: 1em 1em;
}
.order .order_item .flex_item1 {
  width: 80px;
  height: 80px;
  /* background-color: #9002bf; */
  border-radius: 50%;
}
.order .order_item .flex_item1 img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.order .order_item .flex_item2 {
  margin-left: 1em;
  flex: 2;
  height: 80px;
}
.order .order_item .flex_item2 .status {
  float: right;
  font-size: 11px;
  color: #f8825d;
}
.order .order_item .flex_item2 .address {
  font-size: 12px;
  margin-top: 1em;
  color: #666;
}
.date_pirce {
  margin-top: 0.5em;
  font-size: 12px;
}
.date {
  float: left;
}
.pirce {
  float: right;
  margin: -3px;
  text-align: right;
}
</style>